<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-12-30 10:47:10
 * @LastEditors: 朱安武 549410045@qq.com
 * @LastEditTime: 2023-01-06 00:09:13
 * @FilePath: \html学习\vue-test\elementUi\src\pages\LoginPage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-container class="container">
        <img src="https://file.xiazaii.com/file/img/201906201520/1_190116134325_2.jpg" class="bg-img" />
        <el-header>
            <LoginHeader></LoginHeader>
        </el-header>
        <el-main v-if:showLogin='showLogin' >
            <LoginMain  @change-show-login="show"></LoginMain>
        </el-main>
        <el-main v-else>
            <RegisterPage></RegisterPage>
        </el-main>
        <el-footer>
            <LoginFooter></LoginFooter>
        </el-footer>
    </el-container>
</template>

<script setup>
import LoginHeader from "@components/LoginHeader.vue";
import LoginMain from "@components/LoginMain.vue";
import LoginFooter from '@components/LoginFooter.vue'
import RegisterPage from "../components/RegisterMain.vue";
import { ref } from 'vue'

let showLogin = ref(true)
const show = ()=>{
    showLogin.value = false
    console.log(showLogin,'showLogin')
}
</script>

<style scoped>
.container {
    height: 100vh;
}

.bg-img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
</style>